import React, { Component} from 'react';
import {
	Button
} from 'antd';
import './App.less'
import Steps from './Steps'
import {
	Form,
	Input,
	InputNumber,
	Radio
} from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;

export default class App extends Component {
	nextStep = () => {
		this.props.setPage('step2');
	}
	render() {
		const radioData = [{
			value:'男', data:'男'
		}, {
			value:'你', data:'女'
		}]

		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 14 },
			},
		};
		const surveyorleft = [{
			name:'姓名', type:'Input'
		}, {
			name:'年龄', type:'InputNumber'
		}, {
			name:'出生地', type:'Input'
		}, {
			name:'学历', type:'Input'
		}, {
			name:'精神病史', type:'Input'
		}, ]

		const surveyorright = [{
			name:'性别', type:'radio'
		}, {
			name:'职业', type:'Input'
		}, {
			name:'毕业院校', type:'Input'
		}, {
			name:'时代', type:'Input'
		}, ]
		return (
			<div className="step1">
				<div className='step1-content'>
					<Button type="primary">我的任务列表</Button>
					<Steps current={1}/>

					<div className="step1-box1">
						<div className="step1-box1-left">
							<Form>
								{
									surveyorleft.map((e, i)=>(
										<FormItem {...formItemLayout} label={e.name}>
											{e.type == 'Input' ? <Input /> :
												e.type == 'InputNumber' ? <InputNumber /> :
													<RadioGroup defaultValue="a">
														<RadioButton value="a">男</RadioButton>
														<RadioButton value="b">女</RadioButton>
													</RadioGroup>
											}
										</FormItem>
									))
								}
							</Form>
						</div>

						<div className="step1-box1-right">
							<Form>
								{
									surveyorright.map((e, i)=>(
										<FormItem {...formItemLayout} label={e.name}>
											{e.type == 'Input' ? <Input /> :
												e.type == 'InputNumber' ? <InputNumber /> :
													<RadioGroup defaultValue="a">
														<RadioButton value="a">男</RadioButton>
														<RadioButton value="b">女</RadioButton>
													</RadioGroup>
											}
										</FormItem>
									))
								}
							</Form>
						</div>
					</div>

					<Button
						onClick={this.nextStep}
						type="primary"
						className="step1-nextstep-button">
						下一步
					</Button>
				</div>

			</div>
		)
	}
}